import {Cell, CountDown, Tag} from "react-vant";
import React, {Fragment} from "react";
import EmptyPage from "../EmptyPage";

interface Course {
  // 课程名
  "CourseName": string
  // 作业名
  "HWName": string;
  // 结束日期
  "EndDate": string;
  // 已提交
  "IsSubmit": string;
  // 逾期
  "OverDue": string;
}

interface OnlineTest {
  CourseName: string;
  Name: string;
  CreateName: string;
  EndDate: string;
}


interface Props {
  jobs: Array<Course | OnlineTest>;
}

const UncompletedPage: React.FC<Props> = (props) => {
  const {jobs} = props;


  const Timer = (course: { OverDue: string; EndDate: string; HWName?: string; }) => {
    const {OverDue, EndDate, HWName} = course;

    return (
      <div>
        <CountDown time={Number(new Date(EndDate)) - Number(new Date())} format="DD 天 HH 时 mm 分 ss 秒"/>
        {
          HWName ?
            <Tag type={OverDue === '1' ? "danger" : "success"}
                 round>{OverDue === '1' ? "不允许逾期提交" : "允许逾期提交"}</Tag> :
            <Tag type="warning" round>在线练习</Tag>
        }
      </div>
    )
  }

  return (
    <>
      {
        jobs.length ?
          <Cell.Group card>
            <Cell></Cell>
            <Cell></Cell>
            {jobs?.map((course, i) => (
              <Fragment key={i}>
                {
                  "HWName" in course ? course.HWName &&
                    <Cell key={i} title={<h3 style={{margin: 0, padding: 0}}>{course.HWName}</h3>}
                          value={course.CourseName}
                          label={<Timer {...course}/>}
                          style={{backgroundColor: "#f7f9fd"}}/> : course.Name &&
                    <Cell key={course.Name + i}
                          title={<h3 style={{margin: 0, padding: 0}}>{course.Name}</h3>} value={course.CourseName}
                          label={<Timer EndDate={course.EndDate} OverDue={course.Name}/>}
                          style={{backgroundColor: "#f7f9fd"}}></Cell>
                }
              </Fragment>
            ))}
            <Cell></Cell>
            <Cell></Cell>
          </Cell.Group>
          :
          <EmptyPage/>
      }
    </>
  )
}

export default UncompletedPage;
